<template>
  <!--案件导入-案件上传导入-->
  <section class="page introduction-case">
    <data-form
      :model="introductionModel"
      @onSearch="refreshData"
      :rules="introductionRule"
      :page="pageService"
      @handleResetForm="follFeedback"
    >
      <template slot="inputs">
        <el-form-item label="订单号" prop="caseNumber">
          <el-input v-model="introductionModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="批次号" prop="batchNumber">
          <el-input v-model="introductionModel.batchNumber"></el-input>
        </el-form-item>
        <el-form-item label="委托方" prop="principalId">
          <el-select
            v-model="introductionModel.principalId"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="{ index, name, id } in principalList.content"
              :key="index"
              :label="name"
              :value="id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="introductionModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="业务团队" prop="partnerName">
          <el-input v-model="introductionModel.partnerName"></el-input>
        </el-form-item>
        <el-form-item label="贷款银行" prop="bankName">
          <el-input v-model="introductionModel.bankName"></el-input>
        </el-form-item>
        <el-form-item label="催收总金额" prop="amountRange">
          <number-range v-model="introductionModel.amountRange"></number-range>
        </el-form-item>
        <el-form-item label="业务承接地" prop="businessAddress">
          <el-input v-model="introductionModel.businessAddress"></el-input>
        </el-form-item>
        <el-form-item label="上牌地" prop="boardAddress">
          <el-input v-model="introductionModel.boardAddress"></el-input>
        </el-form-item>
        <el-form-item label="车牌号" prop="carNo">
          <el-input v-model="introductionModel.carNo"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box
      :data="introductionDataSet"
      @onPageChange="refreshData"
      :page="pageService"
    >
      <template slot="buttons">
        <!--按钮区域-->
        <el-button @click="dialog.caseExcelImport = true" v-auth="106"
          >案件导入</el-button
        >
        <el-button
          :disabled="!isImported"
          @click="
            updateBatchList();
            dialog.confirmBatch = true;
          "
          v-auth="107"
          >案件确认</el-button
        >
        <el-button
          :disabled="!isImported"
          @click="dialog.deleteBatch = true"
          v-auth="108"
          >案件删除</el-button
        >
        <el-button @click="onClickfileImport" v-auth="114">附件导入</el-button>
      </template>
      <template slot="columns">
        <el-table-column
          prop="caseInfo.caseNumber"
          label="订单编号"
          :min-width="$helper.getColumnWidth(6)"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="openExecutionPage(scope.row)">{{
              scope.row.caseNumber
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="batchNumber"
          label="批次号"
          :min-width="$helper.getColumnWidth(6)"
        >
        </el-table-column>
        <el-table-column
          prop="principalName"
          label="委托方"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="personalName"
          label="客户姓名"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="idCard"
          label="身份证号"
          :min-width="$helper.getColumnWidth(6)"
        >
        </el-table-column>
        <el-table-column
          prop="loanDate"
          label="放款日期"
          :formatter="row => $filter.dateFormat(row.loanDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="mobileNo"
          label="手机号"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="partnerName"
          label="业务团队"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="bankName"
          label="贷款银行"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="loanAmount"
          label="贷款金额"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="row => $filter.toThousands(row.loanAmount)"
        >
        </el-table-column>
        <el-table-column
          prop="overdueStage"
          label="逾期阶段"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="overdueDays"
          label="逾期天数"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="overdueAmount"
          label="催收总金额"
          :min-width="$helper.getColumnWidth(6)"
          :formatter="row => $filter.toThousands(row.overdueAmount)"
        >
        </el-table-column>
        <el-table-column
          prop="businessAddress"
          label="业务承接地"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="boardAddress"
          label="上牌地"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="carNo"
          label="车牌号"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="performanceRate"
          label="绩效比例(%)"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="row => $filter.toThousands(row.performanceRate)"
        >
        </el-table-column>
      </template>
    </data-box>

    <!--案件导入弹出框-->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="dialog.caseExcelImport"
      title="案件导入"
    >
      <case-excel-import
        @close="dialog.caseExcelImport = false"
        @success="refreshData"
        ref="case-excel-import"
      ></case-excel-import>
    </el-dialog>
    <!--选择案件批次-->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="dialog.confirmBatch"
      title="选择案件批次"
    >
      <case-batch-confirm
        :batchList="batchList"
        @close="dialog.confirmBatch = false"
        @success="refreshData"
      ></case-batch-confirm>
    </el-dialog>
    <!--案件删除弹出框-->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="dialog.deleteBatch"
      title="案件删除"
    >
      <case-batch-delete
        :batchList="batchList"
        @close="dialog.deleteBatch = false"
        @success="refreshData"
      ></case-batch-delete>
    </el-dialog>
    <!-- 附件上传 -->
    <el-dialog
      width="750px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialog.fileDialog"
      title="案件附件批量导入"
      @close="close"
    >
      <case-file-import
        @close="dialog.fileDialog = false"
        ref="case-file-import"
      ></case-file-import>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { State } from "vuex-class";
import NumberRange from "~/components/common/number-range.vue";
import CaseExcelImport from "~/components/common/case-excel-import.vue";
import CaseBatchConfirm from "~/components/case-import/case-batch-confirm.vue";
import { PageService } from "~/utils/page.service";
import { CaseInfoService } from "~/services/domain-service/case-info.service";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service";
import { MENU_CHANNEL } from "~/config/enum.config";
import { ReminderService, ReminderMessageType } from "~/utils/reminder.service";
import { Subscription } from "rxjs";
import CaseBatchDelete from "~/components/case-import/case-batch-delete.vue";
import CaseFileImport from "~/components/case-import/case-file-import.vue";
@Layout("workspace")
@Component({
  components: {
    NumberRange,
    CaseExcelImport,
    CaseBatchConfirm,
    CaseBatchDelete,
    CaseFileImport
  }
})
export default class IntroductionCase extends Vue {
  @State private principalList: any;
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(CaseInfoService) private caseInfoService: CaseInfoService;
  @Dependencies(DataImportExcelInfoService)
  private importExcelService: DataImportExcelInfoService;

  private dialog: any = {
    caseExcelImport: false,
    confirmBatch: false,
    deleteBatch: false,
    fileDialog: false
  };
  private batchList: any = [];
  private subscriptions = {
    IMPORT_EXCEL: new Subscription(),
    CONFIRM_CASE: new Subscription()
  };
  private caseDetail: any = "";
  private introductionModel: any = {
    caseNumber: "",
    batchNumber: "",
    principalName: "",
    personalName: "",
    principalId: "",
    partnerName: "",
    bankName: "",
    businessAddress: "",
    boardAddress: "",
    carNo: "",
    amountRange: { min: "", max: "" }
  };
  private deleteImport: any = {
    batchNumber: ""
  };
  private introductionDataSet: any[] = [];
  private introductionRule = {};

  //判断是否有批次号
  get isImported() {
    return this.batchList.length > 0;
  }

  private steplength: number = 0;
  //获取案件列表
  public refreshData() {
    this.importExcelService
      .getAllImportExcelInfos(this.introductionModel, this.pageService)
      .subscribe(data => {
        this.introductionDataSet = data;
      });
    this.updateBatchList();
  }

  private mounted() {
    this.refreshData();
    // 注册消息监听,用于业务自动刷新
    // 刷新数据列表
    this.subscriptions.IMPORT_EXCEL = ReminderService.getInstance()
      .addListener(ReminderMessageType.Background, "IMPORT_EXCEL")
      .subscribe(this.refreshData);
    // 更新每个批次详情，用于在案件确认时
    this.subscriptions.CONFIRM_CASE = ReminderService.getInstance()
      .addListener(ReminderMessageType.Background, "CONFIRM_CASE")
      .subscribe(this.updateBatchList);
  }

  // 页面销毁前注销对事件的监听
  private beforeDestroy() {
    this.subscriptions.IMPORT_EXCEL.unsubscribe();
    this.subscriptions.CONFIRM_CASE.unsubscribe();
  }

  /**
   * 更新批次数据
   */
  private updateBatchList() {
    this.importExcelService.getAllBatchNumbers().subscribe(data => {
      this.batchList = data;
    });
  }

  /**
   * 重置numberRange
   */
  private follFeedback() {
    this.introductionModel.dayRange = { min: "", max: "" };
    this.introductionModel.amountRange = { min: "", max: "" };
    this.introductionModel.caseMoney = { min: "", max: "" };
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Case_imported,
      hiddenAction: true,
      hiddenRemark: true
    });
  }

  private onClickfileImport() {
    this.dialog.fileDialog = true;
  }

  private close() {
    const from: any = this.$refs["case-file-import"];
    from.reset();
  }
}
</script>

<style lang="less">
.page.introduction-case {
  .data-box {
    .error-row > td {
      color: #ff9813 !important;
      span {
        color: #ff9813 !important;
      }
    }
  }
}
</style>
